<template>
  <div>
    <el-container>
      <el-header>
        <el-menu mode="horizontal"
                 background-color="#fff1a0"
                 text-color="black"
                 active-text-color="#9c9d4f">
          <el-menu-item index="1" >
            退款订单
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <div>
          <table class="order" cellspacing="0" cellpadding="10">
            <tr class="th">
              <th style="width: 300px">订单信息</th>
              <th style="width: 150px">支付费用</th>
              <th style="width: 150px">支付状态</th>
              <th style="width: 150px">支付时间</th>
            </tr>
            <tr v-for="order in this.$store.state.orderrefunds">
              <td style="width: 300px">
                <div class="img"><img :src="order.course.image" alt=""></div>
                <div class="orderInfo">
                  <div class="orderName"><strong>{{order.course.name}}</strong></div>
                  <div>共{{order.course.chapterNum}}章{{ order.course.sectionNum }}节</div>
                  <div class="price"><strong>￥</strong>{{order.course.price}}</div>
                </div>
              </td>
              <td style="width: 150px">{{order.course.price}}</td>
              <td style="width: 150px">{{order.status}}</td>
              <td style="width: 150px">{{order.time}}</td>
            </tr>
          </table>
        </div>
        <div v-if="this.$store.state.orderrefunds.length===0"
             style="font-size: 25px;margin-left: 200px;margin-top: 100px ">您还没有退款订单哦，请查看
          <a @click="orderBuy()" style="color: burlywood">已购买订单</a>
          吧！</div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import router from '../../router';
export default {
  name: "studentorderrefund",
  methods:{
    orderBuy(){
      router.push("/student/studentorder/studentorderbuy");
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/student.css";
th,td{
  border: 1px solid;
}
</style>
